<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>尚硅谷购物车页面</title>
  <link rel="stylesheet" th:href="@{/css/minireset.css}"/>
  <link rel="stylesheet" th:href="@{/css/common.css}"/>
  <link rel="stylesheet" th:href="@{/css/cart.css}"/>
  <script th:src="@{/script/vue.min.js}"></script>
  <script th:src="@{/script/axios.min.js}"></script>
  <script>
      window.onload = function () {
          let vue = new Vue({
              el: "#list",
              data: {
                  cartMap: {},
                  carts: {}
              },
              methods: {
                  loadData: function () {
                      axios({
                          method: "post",
                          url: "/bookstore/selectCart"
                      }).then(response => {
                          vue.cartMap = response.data;
                          vue.carts = response.data.carts;
                      });
                  },
                  updateCart: function (id, buyCount) {
                      axios({
                          method: "post",
                          url: "/bookstore/updateCart",
                          params: {
                              id: id,
                              buyCount: buyCount,
                          }
                      }).then(response => {
                          if (response.data.code == 1) {
                              vue.loadData();
                          } else {
                              alert(response.data.message);
                          }
                      });
                  },
                  delCart: function (id) {
                      axios({
                          method: "psot",
                          url: "/bookstore/delCart",
                          params: {
                              id: id,
                          }
                      }).then(response => {
                          if (response.data.code == 1) {
                              vue.loadData();
                          } else {
                              alert(response.data.message);
                          }
                      });
                  }
              },
              created: function () {
                  this.loadData();
              }
          });
      };
  </script>
</head>
<body>
<div class="header">
  <div class="w">
    <div class="header-left">
      <a href="../index.html">
        <img th:src="@{/img/logo.gif}" alt=""/></a>
      <h1>我的购物车</h1>
    </div>
    <div class="header-right">
      <h3>欢迎<span th:text="${session.user.uname}">张总</span>光临尚硅谷书城</h3>
      <div class="order"><a th:href="@{/order}">我的订单</a></div>
      <div class="destory"><a th:href="@{/user/logout}">注销</a></div>
      <div class="gohome">
        <a th:href="@{/index}">返回</a>
      </div>
    </div>
  </div>
</div>
<div id="list" class="list">
  <div class="w">
    <table>
      <thead>
      <tr>
        <th>图片</th>
        <th>商品名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>金额</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <!--<tr th:each="cart:${carts}">
        <td>
          <img th:src="@{|/uploads/${cart.bookimg}|}" alt=""/>
        </td>
        <td th:text="${cart.bookname}">活着</td>
        <td>
          <span class="count" onclick="delCount()">-</span>
          <input class="count-num" type="text" th:value="${cart.buycount}"/>
          <span class="count" onclick="addCount()">+</span>
        </td>
        <td th:text="${cart.price}">36.8</td>
        <td th:text="${#numbers.formatDecimal(cart.price*cart.buycount,1,'COMMA',2,'POINT')}">36.8</td>
        <td><a href="">删除</a></td>
      </tr>-->
      <tr v-for="cart in carts">
        <td>
          <img :src="'/bookstore/uploads/'+cart.bookimg" alt=""/>
        </td>
        <td>{{cart.bookname}}</td>
        <td>
          <span class="count" @click="updateCart(cart.id,cart.buycount-1)">-</span>
          <input class="count-num" type="text" v-model="cart.buycount"/>
          <span class="count" @click="updateCart(cart.id,cart.buycount+1)">+</span>
        </td>
        <td>{{cart.price}}</td>
        <td>{{(cart.price*cart.buycount).toFixed(2)}}</td>
        <td>
          <button @click="delCart(cart.id)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <div class="footer">
      <div class="footer-left">
        <a th:href="@{/delCarts}" class="clear-cart">清空购物车</a>
        <a th:href="@{/index}">继续购物</a>
      </div>
      <div class="footer-right">
        <div>共<span>{{cartMap.totalCount}}</span>件商品</div>
        <div class="total-price">总金额<span>{{(cartMap.totalPrice).toFixed(2)}}</span>元
        </div>
        <a class="pay" th:href="@{checkout}">去结账</a>
      </div>
    </div>
  </div>
</div>
<div class="bottom">
  <div class="w">
    <div class="top">
      <ul>
        <li>
          <a href="">
            <img th:src="@{/img/bottom1.png}" alt=""/>
            <span>大咖级讲师亲自授课</span>
          </a>
        </li>
        <li>
          <a href="">
            <img th:src="@{/img/bottom.png}" alt=""/>
            <span>课程为学员成长持续赋能</span>
          </a>
        </li>
        <li>
          <a href="">
            <img th:src="@{/img/bottom2.png}" alt=""/>
            <span>学员真是情况大公开</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="content">
      <dl>
        <dt>关于尚硅谷</dt>
        <dd>教育理念</dd>
        <!-- <dd>名师团队</dd>
        <dd>学员心声</dd> -->
      </dl>
      <dl>
        <dt>资源下载</dt>
        <dd>视频下载</dd>
        <!-- <dd>资料下载</dd>
        <dd>工具下载</dd> -->
      </dl>
      <dl>
        <dt>加入我们</dt>
        <dd>招聘岗位</dd>
        <!-- <dd>岗位介绍</dd>
        <dd>招贤纳师</dd> -->
      </dl>
      <dl>
        <dt>联系我们</dt>
        <dd>http://www.atguigu.com</dd>
        <dd></dd>
      </dl>
    </div>
  </div>
  <div class="down">
    尚硅谷书城.Copyright ©2023
  </div>
</div>
</body>
</html>
